<template>
  <div>
    <p>
      FunctionObj.call(obj, "参数")，执行FunctionObj，但是执行FunctionObj的时候，FunctionObj里的this暂时指向obj<br />
      obj.FunctionObj("参数") 前提是要obj要有这个方法。<br />
      但是FunctionObj.call(obj, "参数")允许obj没有这个方法，但是也可以调用<br />
      可以理解obj对象借用下FunctionObj方法，即改变this指针，对象借用方法。<br />
    </p>
    <el-button type="primary" @click="handleCall">call</el-button>

    <p>
      apply和call作用一样，都是对象借用方法，使方法里的this指针指向对象<br />
      不同点是，apply是数组入参；call是分别入参 <br />
      使用call、apply可以实现继承的效果
    </p>
    <el-button type="primary" @click="handleApply">apply</el-button>

    <p>
      跟call类似，只是call是立即调用借用的方法，bind可以后面在慢慢调用<br />
      对于给定的函数，创建一个与原始函数相同的深克隆绑定函数。 <br />
      绑定函数的this对象与指定的对象相关联，并且具有指定的初始值 <br />
    </p>
    <el-button type="primary" @click="handleBind">bind</el-button>

    <p style="color: red">
      要注意的是，call、apply、bind所借用的方法不能是箭头函数，否则箭头函数会使this指针指向父包很容易出问题。
    </p>

  </div>
</template>

<script>
export default {
  methods: {
    // 借用方法
    handleCall () {
      function User (name, age) {
        this.name = name;
        this.age = age
      }
      let hdcms = {};
      User.call(hdcms, "HDCMS", 10);
      console.log(hdcms); //HDCMS
    },
    handleApply () {
      function User (name, age) {
        this.name = name;
        this.age = age
      }
      let hdcms = {};
      User.apply(hdcms, ["HDCMS", 10]);
      console.log(hdcms); //HDCMS
    },
    handleBind () {
      let method = function () {
        console.log("this", this)
        if (this) {
          this.age = 10
        }
        console.log("method");
      }
      let obj = {}
      console.log("bind是深拷贝", method.bind() == method);
      console.log("bind后能立刻执行", method.bind()())

      let newMethod = method.bind(obj)
      newMethod()
      console.log("bind是深克隆方法，并改变方法的this指正，指向obj，并且不会立刻执行", obj);
    }
  }
}
</script>

<style lang="less" scoped>
p {
  line-height: 30px;
}
</style>